import React, { PureComponent } from 'react';
import { Flex, Modal, Checkbox, Button, Toast } from 'antd-mobile';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import NavBottomBar from '../../components/NavBottomBar/NavBottomBar';

const AgreeItem = Checkbox.AgreeItem;
import { cart_bottom } from './cartBottom.less';

class CartBottom extends PureComponent {
  constructor(props) {
    super(props);
  }

    hasAllCheeck=(cartIds) => {

        const isCheckEvery = cartIds.length>0 && cartIds.every((v,i,a)=>{
            const isCheckEvery = v.goodslist.every((vv,ii,aa)=>{
                return vv.isCheck==1
            });
            return isCheckEvery==true
        });

        return isCheckEvery;
    }

  checkAll=(e, arr) => {
    if (e.target.checked == false) {
      this.props.dispatch({ type: 'cart/checkShopAllCartEFF', isCheck:0 });
    } else if (e.target.checked == true) {
      this.props.dispatch({ type: 'cart/checkShopAllCartEFF', isCheck:1 });
    }
  }

  delBySelected=() => {
    this.props.dispatch({ type: 'cart/delCheckCartEFF' });
  }


  render() {
    const { cart, dispatch } = this.props;
    const { editStatus, cartIds, discountedPrice, isAllCheck, totlePrice,cartIdLength } = cart;
    return (
      <div className={cart_bottom}>
        <Flex justify="between" className="cart_jiesuan">
          <div>
            <AgreeItem
              checked={ isAllCheck==1 ? true : false }
              onChange={(e) => this.checkAll(e)}
            >
              全选
            </AgreeItem>
          </div>
          {
            editStatus == true ?
                <Flex>
                  <Flex style={{ height:'0.9rem', lineHeight:"0.45rem"}} direction="column">
                    <div style={{ width:'100%', fontSize:'0.28rem', fontWeight:"bold" }}>
                      <span>总计：</span>

                      <span style={{ color:'#ff0036' }}>
                        ￥{
                          totlePrice
                        }
                      </span>
                    </div>

                    <div style={{ width:'100%', color:'#333' }}>
                      已优惠：￥{discountedPrice}
                   </div>
                </Flex>

                  <div
                      onClick={()=>{

                          this.props.dispatch({type:"cart/cartSettlementEFF"}).then(result=>{
                              if(result.code==200){
                                  dispatch(routerRedux.push("/order"))
                              }else{
                                  Toast.info(result.msg,2)
                              }
                          })

                        }
                      }
                    className="click_buy"
                  >
                    去结算
                  </div>

                </Flex>

             :
            <Flex className="delect">
              <div
                onClick={()=>{
                    dispatch({ type: 'cart/favgoodsEFF'});

                }}
              >
                移入收藏
              </div>
              <div
                  style={{ border:'0.01rem solid #ff0036', color:"#ff0036" }}
                  onClick={
                    () => {
                            Modal.alert('提示',<div style={{ lineHeight: '0.9rem', fontSize: "0.3rem",padding:".1rem",color:"#333" }}>确定要删除吗?</div> , [
                              { text: '取消' },
                              {
                                text: '确定',
                                onPress: () => {
                                  this.delBySelected();
                                },
                              },
                            ]);
                    }}
              >
                删除
              </div>
            </Flex>
          }
        </Flex>
      </div>
    );
  }
}

export default connect(({ cart,order }) => ({ cart,order }))(CartBottom);
